import React, { Component } from 'react'
import {
  Card,
  Table,
  Button,
  Modal,
  message
} from 'antd'

import { PlusOutlined, ArrowRightOutlined } from '@ant-design/icons'

import {
  APIGetCategoryList,
  APIAddCategoryList,
  APIUpdateCategoryName
} from '../../api/index'
import AddForm from './AddForm'
import UpdateForm from './UpdateForm'
import { PAGE_SIZE } from '../../utils/constants'
export default class Category extends Component {
  state = {
    categoryList: [], // 一级分类列表
    subCategoryList: [], //二次分类列表
    loading: false, // 是否正在获取数据
    parentID: '0', // 当前需要显示的分类列表的parentID
    parentName: '', // 当前需要显示的分类列表名称
    showStatus: 0, // 显示对话框  0：都不显示，1：显示添加分类对话框，2：显示修改分类对话框
    
  }
  // 获取分类列表方法
  getCategoryList = async (pId) => {
    const parentID = pId || this.state.parentID
    this.setState({loading: true})
    const { data } = await APIGetCategoryList(parentID)
    if(parentID === '0') {
      // 更新一级分类列表
      this.setState({categoryList: data})
    } else {
      // 更新二级分类列表
      this.setState({subCategoryList: data})
    }
    this.setState({loading: false})
  }

  // 显示指定一级分类对象的二级列表
  showSubCategoryList = (categoryItem) => {
    this.setState({
      parentID: categoryItem._id,
      parentName: categoryItem.name
    }, () => {
      // 获取二级分类列表
      this.getCategoryList()
    })
    
  }
  // 显示一级分类列表
  showFirstCategoryList = () => {
    this.setState({
      parentID: '0',
      parentName: ''
    }, () => {
      // 获取一级分类列表
      this.getCategoryList()
    })
  }

  // 响应点击取消：隐藏确认框
  handleCancel = () => {
    this.setState({
      showStatus: 0
    })
  }

  // 显示添加Modal
  showAddModal = () => {
    this.defaultAddValue = ''
    this.name = ''
    this.id = ''
    this.setState({
      showStatus: 1
    })
  }

  // 添加分类列表
  addCategoryList = async () => {
    const parentId = this.id || this.state.parentID
    const categoryName = this.name
    const result = await APIAddCategoryList(parentId, categoryName)
    if(result.status === 0) {
      message.success('添加成功')
    } else {
      message.error('添加失败')
    }
    // 重新显示列表
    if(parentId === null || this.state.parentID) {
      this.getCategoryList()
    } else if(parentId === '0') {
      this.getCategoryList('0')
    }
    
    this.handleCancel()
  }

  // 显示修改分类列表名称Modal
  showUpdateModal = (categoryItem) => {
    // 保存分类对象
    this.categoryItem = categoryItem
    this.name = this.categoryItem.name
    this.setState({
      showStatus: 2
    })
  }

  // 更新分类列表名称 
  updateCategoryName = async () => {
    // 准备数据
    const categoryId = this.categoryItem._id
    const categoryName = this.name
    // 发请求更新分类名称
    await APIUpdateCategoryName({ categoryId, categoryName })
    // 重新显示列表
    this.getCategoryList()
    // 隐藏Modal
    this.handleCancel()
  }



  // 初始化Table所有列的数组
  initeColums = () => {
    this.columns = [
      {
        title: '分类的名称',
        dataIndex: 'name', // 显示数据对应的属性名
      },
      {
        title: '操作',
        width: 300,
        render: (categoryItem) => (
          <span>
            <Button type="link" onClick={() => this.showUpdateModal(categoryItem)}>修改分类</Button>
            {
              this.state.parentID === '0' ? 
                <Button type="link" onClick={() => this.showSubCategoryList(categoryItem)}>查看子分类</Button> : null
            }
          </span>
        )
      }
    ];
  }

  // 执行render()后，发送异步请求
  componentDidMount() {
    this.getCategoryList()
  }
  render() {
    const { 
      categoryList, 
      subCategoryList, 
      loading, 
      parentID, 
      parentName,
      showStatus
    } = this.state
    const categoryItem = this.categoryItem || {}
    // 初始化表单头信息 colums
    this.initeColums()
    // Card左侧
    const title = parentID === '0' ? '一级分类列表' : (
      <span>
        <Button type="link" onClick={this.showFirstCategoryList}>一级分类列表</Button>
        <ArrowRightOutlined style={{margin: '0 20px 0 10px'}}/>
        <span>{parentName}</span>
      </span>
    )
    // Card右侧
    const extra = (
      <Button type="primary" onClick={this.showAddModal}>
        <PlusOutlined />
        添加
      </Button>
    )
    
    return (
      <div>
          <Card title={title} extra={extra}>
            <Table 
              rowKey='_id'
              bordered
              loading={loading}
              dataSource={ parentID === '0' ? categoryList : subCategoryList } 
              columns={this.columns}
              pagination={{defaultPageSize: PAGE_SIZE, showQuickJumper: true}}
            />
          </Card>
          <Modal 
            key={parentID} 
            title="添加分类" 
            visible={showStatus===1} 
            onOk={this.addCategoryList} 
            onCancel={this.handleCancel}
          >
            <AddForm 
              categoryList={categoryList}
              parentID={parentID}
              setName={name => this.name = name}
              setId={id => this.id = id}
              defaultAddValue={this.defaultAddValue}
            />
          </Modal>
          <Modal 
            key={categoryItem.name} 
            title="更新分类" 
            visible={showStatus===2} 
            onOk={this.updateCategoryName} 
            onCancel={this.handleCancel}
          >
            <UpdateForm 
              categoryName={categoryItem.name} 
              setName={name => this.name = name}
            />
          </Modal>
      </div>
    )
  }
}
